<template>
    <div>
        <canvas id="canvas" width="200" height="100"></canvas>
    <!--    <ElImage src="src/renderer/assets/sample.jpg"></ElImage>-->

        <el-button @click="finishEdit" v-if="!isEditFinish">完成编辑</el-button>

        <el-button @click="downloadImag('#canvas')" v-if="isEditFinish">下载图片</el-button>

        <el-button @click="changeBg()" v-if="isEditFinish">更换背景图片</el-button>

        <el-button @click="gotoMore()" v-if="isEditFinish">美化图片</el-button>
    </div>
</template>

<script>
    export default {
        name: "Eraser",

        mounted() {
            var oCanvas = document.getElementById("canvas");
            var width = oCanvas.width;
            var height = oCanvas.height;
            //上下文--画笔
            var context = oCanvas.getContext("2d");


            //设置需要处理图片
            let img = new Image()
            img.src = "src/renderer/assets/sample.jpg"
            //图片加载完后，将其显示在canvas中
            img.onload = function(){
                context.drawImage(this, 0, 0)
                // context.drawImage(this, 0, 0, 1080, 980)改变图片大小到1080*980
            }

            // context.globalCompositeOperation = 'destination-out';
            //
            //清空画布
            //橡皮事件
            oCanvas.onmousedown = function(e) {

                oCanvas.onmousemove = function(e) {

                    var wid = e.offsetX;
                    var hei = e.offsetY;
                    //打印宽高
                    // console.log(wid);
                    // console.log(hei);
                    //context.clearRect(wid-10, hei-10, 20, 20);
                    context.beginPath();
                    context.arc(wid, hei, 10, 0, 2 * Math.PI);
                    context.closePath();
                    context.fillStyle = 'white';
                    context.fill();
                    context.globalCompositeOperation = 'destination-out';

                }

            }
            oCanvas.onmouseup = function() {
                oCanvas.onmousemove = "null";
            }

//             var canvas = document.getElementById("myCanvas")
//             var context = canvas.getContext("2d")
//
//             var img = new Image()
//             img.src = 'src/renderer/assets/sample.jpg'
// //图片加载完后，将其显示在canvas中
//             img.onload = function(){
//                 context.drawImage(this, 0, 0)
//                 // context.drawImage(this, 0, 0, 1080, 980)改变图片大小到1080*980
//             }
        },
        data() {
          return {
              isEditFinish: false,
              editImgUrl: 'src/renderer/assets/pr列属性.png'
          }
        },
        methods: {
            downloadImag(selector) {
                const canvas = document.querySelector(selector);

                // 创建一个 a 标签，并设置 href 和 download 属性
                const el = document.createElement('a');
                // 设置 href 为图片经过 base64 编码后的字符串，默认为 png 格式
                el.href = canvas.toDataURL();
                el.download = '文件名称';

                // 创建一个点击事件并对 a 标签进行触发
                const event = new MouseEvent('click');
                el.dispatchEvent(event);
            },
            changeBg() {
                var oCanvas = document.getElementById("canvas");
                var width = oCanvas.width;
                var height = oCanvas.height;
                //上下文--画笔
                var context = oCanvas.getContext("2d");

                context.globalCompositeOperation="destination-over";
                let img = new Image()
                img.src = this.editImgUrl
                //图片加载完后，将其显示在canvas中
                img.onload = function(){
                    context.drawImage(this, 0, 0)
                    // context.drawImage(this, 0, 0, 1080, 980)改变图片大小到1080*980
                }
            },
            finishEdit() {
                this.isEditFinish = true
            },
            gotoMore() {
                let canvas = document.getElementById('canvas')
                var image = new Image();
                // canvas.toDataURL 返回的是一串Base64编码的URL
                // 指定格式 PNG
                image.src = canvas.toDataURL("image/png");
                console.log(image.src)
                this.$router.replace({path: '/more', query: {src: image.src}})
                return image;
            }
        }

    }
</script>

<style scoped>

</style>